// src/components/AuthRoute.jsx（路由拦截器核心组件）
import { Navigate, useLocation, Outlet } from 'react-router-dom';
import type { AppRouteObject } from '@/router/type';
// 1. 全局配置（可抽离到 config.js 中）
export const ROUTE_CONFIG = {
  whiteList: ['/login', '/404'], // 白名单路由（无需拦截）
  loginRoute: '/login', // 未登录跳转路由
  noAuthRoute: '/403', // 无权限跳转路由
};

// 2. 模拟权限工具（实际项目中替换为接口/存储校验）
export const AuthUtil = {
  // 检查是否登录（从 localStorage 读取 token）
  isLogin: () => !!localStorage.getItem('token'),
  // 获取当前用户角色（从 localStorage 读取，或接口返回）
  getUserRole: () => localStorage.getItem('role') || 'guest', // 可选：admin/editor/guest
  // 检查是否有权限访问该路由（匹配 meta.role）
  hasPermission: (routeMeta = {} as AppRouteObject) => {
    // 无需角色校验的路由直接放行
    if (!routeMeta.meta?.role || routeMeta.meta?.role.length === 0) return true;
    // 角色匹配则放行
    return routeMeta.meta?.role.includes(AuthUtil.getUserRole());
  },
};

/**
 * 路由拦截器组件：包裹需要权限控制的路由
 * @param {Object} meta - 路由元数据（从路由配置中传入）
 * @param {React.ReactNode} children - 目标路由组件
 */
function AuthRoute({
  meta = {},
  children,
}: {
  meta?: AppRouteObject;
  children: React.ReactNode;
}) {
  const location = useLocation();
  const currentPath = location.pathname;

  // 3. 白名单路由：直接放行
  if (ROUTE_CONFIG.whiteList.includes(currentPath)) {
    return children || <Outlet />;
  }

  // 4. 未登录拦截：跳登录页，携带回跳路径
  if (!AuthUtil.isLogin()) {
    return (
      <Navigate
        to={ROUTE_CONFIG.loginRoute}
        replace
        state={{ from: currentPath }} // 存储当前路径，登录后回跳
      />
    );
  }

  // 5. 角色权限拦截：跳无权限页
  if (!AuthUtil.hasPermission(meta)) {
    return <Navigate to={ROUTE_CONFIG.noAuthRoute} replace />;
  }

  // 6. 所有校验通过：渲染目标组件
  return children || <Outlet />;
}

export default AuthRoute;
